import React, { FC, useRef } from 'react'
import { Avatar, Image,Tooltip } from 'antd'; 
import { UserOutlined } from "@ant-design/icons"
import { inject, observer } from 'mobx-react';
import { ajax } from './../api/index';
import { baseURL } from '../api/request';
const  MyAvatar:FC<any>= ({
    uinfo
})=> {
    const {userInfo,changeInfo} = uinfo
    const file:any  = useRef()
    const startUpload = ()=>{
        file.current.click()
    }
    const todoUpload = async ()=>{
        var filedata = file.current.files[0]
        var data = new FormData()
        data.append('file',filedata)

        let res = await ajax.uploadfile(data)
        let {path} = res;
        if(res.code==200){
            // 上传成功 
            // 修改用户信息 
            let {code,result} = await ajax.changeuserinfo({
                avatar:path 
            })
            if(code==200){
                // 修改userInfo 
                userInfo.avatar = path;
                changeInfo(userInfo);
            }
        }
    }
    return (
        <div style={{marginLeft:15,display:'flex',alignItems:"center",cursor:'pointer'}}>
            <input type="file" style={{display:'none' }}  ref={file}  onChange={todoUpload} />
            <Tooltip placement="bottom" title={'上传头像'}>
                {
                     userInfo?.avatar?
                     <img src={userInfo.avatar.replace(/public/,baseURL)} style={{width:40,height:40,borderRadius:'50%'}}  onClick={startUpload}  />
                     :
                     <img onClick={startUpload}  style={{width:40,height:40,borderRadius:'50%'}}   src={require('../assets/images/photo.png')} />
                }
          
                
            </Tooltip>
        </div>
    )
}

export default  inject('uinfo')(observer(MyAvatar)) 